<template>
   <div id="allmap" ref="allmap" :style="mapStyle"></div>
</template>

<script> 
  export default { 
    props:["mapStyle"],
    data() {
      return {}
    },
    mounted() {
      this.drawmap()
    },
    methods: {
      drawmap: function() {
        // 百度地图API功能
        console.log(this.$refs.allmap)
        // let amap = this.$refs.allmap
        var map = new BMap.Map(this.$refs.allmap);
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 11);

        function theLocation() {
          var city = document.getElementById("cityName").value;
          if (city != "") {
            map.centerAndZoom(city, 11); // 用城市名设置地图中心点
          }
        }
      },
      addMark(map){
        var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
        					 [116.406605,39.921585,"地址：北京市东城区东华门大街"],
        					 [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
        					];
        	var opts = {
        				width : 250,     // 信息窗口宽度
        				height: 80,     // 信息窗口高度
        				title : "信息窗口" , // 信息窗口标题
        				enableMessage:true//设置允许信息窗发送短息
        			   };
        	for(var i=0;i<data_info.length;i++){
        		var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
        		var content = data_info[i][2];
        		map.addOverlay(marker);               // 将标注添加到地图中
        		addClickHandler(content,marker);
        	}
        	function addClickHandler(content,marker){
        		marker.addEventListener("click",function(e){
        			openInfo(content,e)}
        		);
        	}
        	function openInfo(content,e){
        		var p = e.target;
        		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        		map.openInfoWindow(infoWindow,point); //开启信息窗口
        	}
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
